<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>新闻资讯</title>
</head>
<include file="style"/>
<style type="text/css">

.news-list {
  padding: 2rem 0;
  margin-top: -3rem;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.news-list>ul>li {
  border-bottom: 1px solid #C8C8C8;
  margin-top: 3rem;
}

.news-list>ul>li>a {
  color: #000000;
  font-size: 4rem;
}

.date-div {
  font-size: 3rem;
}

.btn-style {
  padding: 0;
  width: 18rem;
  height: 7rem;
  font-size: 4rem;
  border-radius: 6px;
  text-align: center;
  vertical-align: middle;
}


</style>
<body style="background-color: #EFF5FF">

<include file="header"/>


<div id="newsContentDiv">

<div style="width: 100%; height: 38rem; background-image: url('{$banner}'); background-repeat: no-repeat; background-size: 100% 100%;">
</div>

  <div class="sub-title-div" style="margin-top: 40px;">
    <div class="sub-title-text">新闻资讯</div>
    <div>
      <span class="text-line"></span>
      <span class="sub-title-text-eng">News</span>
      <span class="text-line"></span>
    </div>
  </div>

  <div class="news-list">
      <ul>

        <li v-for="n in news">
          <a @click="clickNewsTitle(n.id)">{{n.title}}</a>
          <div class="am-g">
            <div class="am-u-md-10 date-div" style="padding: 0">{{n.date}}</div>
            <div class="am-u-md-2" style="font-size: 5rem; margin-top: -3rem; color: #C8C8C8; text-align: right;">&raquo;</div>
          </div>
        </li>


      </ul>
    </div>

    <div class="am-g" style="margin: 5rem auto;">
      <div class="am-u-md-4" style="text-align: center;">
        <button type="button" class="am-btn am-btn-secondary btn-style" v-bind:disabled="isNotHavaPrePage" @click="clickPrePage">
          上一页
        </button>
      </div>
      <div class="am-u-md-4">
        <div style="padding: 0 15px; text-align: center; font-size: 4rem">{{currentPage}}&nbsp;/&nbsp;{{totlePage}}</div>
      </div>
      <div class="am-u-md-4" style="text-align: center;">
        <button type="button" class="am-btn am-btn-secondary btn-style" v-bind:disabled="isNotHaveNextPage" @click="clickNextPage">下一页</button>
      </div>
    </div>

</div>


<include file="footer"/>
</body>

<!-- <script src="__PUBLIC__/js/vue.min.js"></script> -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">


new Vue({
  el: "#newsContentDiv",
  data: {
    currentPage: 1,
    totlePage: 0,
    isNotHavaPrePage: false,
    isNotHaveNextPage: false,
    news: new Object(),
  },
  mounted: function() {
    this.getTotlePage()
    // this.refreshNews()
  },
  methods: {
    refreshNews: function() {
      let that = this
      axios.get(`/index.php/Index/getNewsPerPage?current=${this.currentPage}`)
        .then(function(response) {
          that.news = response.data
          that.isNotHavaPrePage = that.currentPage === 1
          that.isNotHaveNextPage = that.currentPage === that.totlePage
          // console.log(response.data)
        })
    },

    getTotlePage: function() {
      let that = this
      axios.get('/index.php/Index/getNewsTotlePageNum')
        .then(function(response) {
          // console.log(response)
          that.totlePage = response.data.pageNum
          that.refreshNews()
        })
    },

    clickNextPage: function() {
      this.currentPage = this.currentPage + 1
      this.refreshNews()
    },

    clickPrePage: function() {
      this.currentPage = this.currentPage - 1
      this.refreshNews()
    },

    clickNewsTitle: function(id) {
      window.location.href = `/index.php/Index/newsPage?id=${id}`
    }

  }
})

</script>
</html>